<template>
    <header>

        <!-- header-message -->
        <headmessage v-if="headmessage" :headmessage="headmessage" @closemsg="closemsg"></headmessage>
        <!-- header-message-end -->

        <!-- header-top-start -->
        <headtop></headtop>
        <!-- header-top-end -->

        <!-- header-search-area -->
        <headsearch></headsearch>
        <!-- header-search-area-end -->

        <div id="sticky-header" class="menu-area">
            <div class="container custom-container">
                <div class="row">
                    <div class="col-12">
                        <div class="mobile-nav-toggler"><i class="fas fa-bars"></i></div>
                        <headnavigation></headnavigation>
                        <!-- Mobile Menu  -->
                        <div class="mobile-menu">
                            <nav class="menu-box">
                                <div class="close-btn"><i class="fas fa-times"></i></div>
                                <div class="nav-logo"> <router-link to="index.html"><img src="img/logo/logo.png" alt=""
                                            title=""></router-link>
                                </div>
                                <div class="menu-outer">
                                    <!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header-->
                                </div>
                                <div class="social-links">
                                    <ul class="clearfix">
                                        <li> <router-link to="#"><span class="fab fa-twitter"></span></router-link>
                                        </li>
                                        <li> <router-link to="#"><span class="fab fa-facebook-f"></span></router-link>
                                        </li>
                                        <li> <router-link to="#"><span class="fab fa-pinterest-p"></span></router-link>
                                        </li>
                                        <li> <router-link to="#"><span class="fab fa-instagram"></span></router-link>
                                        </li>
                                        <li> <router-link to="#"><span class="fab fa-youtube"></span></router-link>
                                        </li>
                                    </ul>
                                </div>
                            </nav>
                        </div>
                        <div class="menu-backdrop"></div>
                        <!-- End Mobile Menu -->
                    </div>
                </div>
            </div>
        </div>
    </header>
</template>
 
<script>
import headmessage from './headmessage'
import headtop from './headtop'
import headsearch from './headesearch'
import headnavigation from './headnavigation'

import { mapGetters, mapActions, mapMutations, mapState } from 'vuex';

import { getheadmessage } from '@/api/head';
export default {
    components: {
        headmessage,
        headtop,
        headsearch,
        headnavigation
    },
    methods: {
        closemsg() {
            window.sessionStorage.setItem('headmessage', this.headmessage)
            this.headmessage = null
        }
    },
    data() {
        return {
            headmessage: null,
        }
    },
    computed: {

    },
    created() {
        if (!window.sessionStorage.getItem('headmessage')) {
            getheadmessage().then(res => {
                this.headmessage = res.data
            })
        }
    },
    mounted() {

    },
    watch: {

    },

    beforeCreate() {

    },
    beforeDestroy() {

    },
    deactivated() {

    },
}
</script>
<style>

</style>